  .relative{
    position: relative;
  }
  .flex {
    display: flex;
  }
  .flex1 {
    flex: 1;
  }
  .flex2 {
    flex: 2;
  }
  .flex-col {
    flex-direction: column;
  }
  .flex-center {
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .align-center{
    align-items: center;
  }
  .flex-wrap{
    flex-wrap: wrap;
  }
  .flex-nowrap{
    flex-wrap: nowrap;
  }
  .flex-col {
    display: flex;
    flex-direction: column;
  }
  .flex-col-reverse {
    display: flex;
    flex-direction: column-reverse;
  }
  .flex-row-reverse {
    display: flex;
    flex-direction: row-reverse;
  }
  .flex-row {
    display: flex;
    flex-direction: row;
  }
  .flex-around {
    justify-content: space-around;
  }
  .flex-between {
    justify-content: space-between;
  }
  .justify-start {
      display: flex;
      justify-content: flex-start;
    }
  .justify-center {
      display: flex;
      justify-content: center;
  }
  .flex-shrink0{
    flex-shrink: 0;
  }
  .justify-end {
      display: flex;
      justify-content: flex-end;
  }
  .justify-evenly {
      display: flex;
      justify-content: space-evenly;
  }
  .justify-around {
      display: flex;
      justify-content: space-around;
  }
  .justify-between {
      display: flex;
      justify-content: space-between;
  }
  .align-start {
      display: flex;
      align-items: flex-start;
  }
  .align-center {
      display: flex;
      align-items: center;
  }
  .align-end {
      display: flex;
      align-items: flex-end;
  }
  
  
  .clearfix{
    zoom: 1;
  }
  .clearfix::after,
  .clearfix::before{
    content: "";
    display: table !important;
    clear: both;
  }
  
  .nowrap{
    white-space: nowrap;
  }
  
  .text-over {
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
  }

  .text-over-1 {
    display: -webkit-box;
    overflow: hidden;
    text-overflow: ellipsis;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
  }
  
  .text-over-2 {
    display: -webkit-box;
    overflow: hidden;
    text-overflow: ellipsis;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
  }
  
  .text-over-3 {
    display: -webkit-box;
    overflow: hidden;
    text-overflow: ellipsis;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
  }

@for $value from 8 through 40 {
  .font#{$value} {
    font-size: ($value*2rpx);
  }
}

@for $value from 1 through 100 {
  .borderRadius-#{$value} {
    border-radius: ($value*1px);
  }
  .m-#{$value} {
    margin: ($value*1px);
  }
  .mt-#{$value} {
    margin-top: ($value*1px);
  }
  .mb-#{$value} {
    margin-bottom: ($value*1px);
  }
  .ml-#{$value} {
    margin-left: ($value*1px);
  }
  .mr-#{$value} {
    margin-right: ($value*1px);
  }
  .pd-#{$value} {
    padding: ($value*1px);
  }
  .pdt-#{$value} {
    padding-top: ($value*1px);
  }
  .pdb-#{$value} {
    padding-bottom: ($value*1px);
  }
  .pdl-#{$value} {
    padding-left: ($value*1px);
  }
  .pdr-#{$value} {
    padding-right: ($value*1px);
  }
}


.line-through {
  text-decoration: line-through;
}
.line-underline{
  text-decoration: underline;
}
.border-line{
  border-bottom: 1rpx solid #DEE6E5;
}
.border-left-line{
  border-left: 1rpx solid #DEE6E5;
}

.border-line-dashed{
  border-bottom: 1rpx dashed #DEE6E5;
}
.border-left-line-dashed{
  border-left: 1rpx dashed #DEE6E5;
}

.w100{
  width: 100%;
}